<template>
  <div class="stats-view">
    <!-- 图表容器 -->
    <el-card class="chart-card">
      <template #header>
        <div class="section-title">📊 平台数据分布</div>
      </template>
      <div class="chart-placeholder">
        <div class="chart-content">
          <div class="chart-icon">📊</div>
          <div class="chart-title">饼图：各平台数据占比</div>
          <div class="chart-data">
            <div class="data-item">
              <span class="data-color" style="background: #ff6b6b;"></span>
              小红书: 35%
            </div>
            <div class="data-item">
              <span class="data-color" style="background: #4ecdc4;"></span>
              知乎: 25%
            </div>
            <div class="data-item">
              <span class="data-color" style="background: #45b7d1;"></span>
              抖音: 20%
            </div>
            <div class="data-item">
              <span class="data-color" style="background: #f9ca24;"></span>
              B站: 12%
            </div>
            <div class="data-item">
              <span class="data-color" style="background: #6c5ce7;"></span>
              微博: 5%
            </div>
            <div class="data-item">
              <span class="data-color" style="background: #a0a0a0;"></span>
              其他: 3%
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="chart-card">
      <template #header>
        <div class="section-title">📈 爬取趋势</div>
      </template>
      <div class="chart-placeholder">
        <div class="chart-content">
          <div class="chart-icon">📈</div>
          <div class="chart-title">折线图：每日爬取数量趋势</div>
          <div class="trend-data">
            <div class="trend-item">
              <span class="trend-date">08-01</span>
              <div class="trend-bar" style="width: 60%;"></div>
              <span class="trend-value">120</span>
            </div>
            <div class="trend-item">
              <span class="trend-date">08-02</span>
              <div class="trend-bar" style="width: 80%;"></div>
              <span class="trend-value">160</span>
            </div>
            <div class="trend-item">
              <span class="trend-date">08-03</span>
              <div class="trend-bar" style="width: 100%;"></div>
              <span class="trend-value">200</span>
            </div>
            <div class="trend-item">
              <span class="trend-date">今日</span>
              <div class="trend-bar active" style="width: 45%;"></div>
              <span class="trend-value">89</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <el-card class="stat-card">
        <div class="stat-header">
          <div class="stat-title">总任务数</div>
          <div class="stat-icon">📋</div>
        </div>
        <div class="stat-value">{{ totalTasks }}</div>
        <div class="stat-change positive">+{{ weeklyIncrease }} 本周</div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-header">
          <div class="stat-title">成功任务</div>
          <div class="stat-icon">✅</div>
        </div>
        <div class="stat-value">{{ successTasks }}</div>
        <div class="stat-change positive">{{ successRate }}% 成功率</div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-header">
          <div class="stat-title">失败任务</div>
          <div class="stat-icon">❌</div>
        </div>
        <div class="stat-value">{{ failedTasks }}</div>
        <div class="stat-change negative">{{ failureRate }}% 失败率</div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-header">
          <div class="stat-title">爬取总数</div>
          <div class="stat-icon">🔢</div>
        </div>
        <div class="stat-value">{{ totalCrawled.toLocaleString() }}</div>
        <div class="stat-change positive">+{{ todayIncrease }} 今日</div>
      </el-card>
    </div>

    <!-- 详细统计表格 -->
    <el-card class="detail-stats">
      <template #header>
        <div class="section-title">📋 详细统计</div>
      </template>
      
      <el-table :data="detailStats" style="width: 100%">
        <el-table-column prop="platform" label="平台" width="120">
          <template #default="{ row }">
            {{ row.icon }} {{ row.platform }}
          </template>
        </el-table-column>
        <el-table-column prop="totalTasks" label="总任务" width="100" />
        <el-table-column prop="successTasks" label="成功" width="100" />
        <el-table-column prop="failedTasks" label="失败" width="100" />
        <el-table-column prop="totalData" label="数据量" width="120">
          <template #default="{ row }">
            {{ row.totalData.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="avgSpeed" label="平均速度" width="120">
          <template #default="{ row }">
            {{ row.avgSpeed }} 条/分钟
          </template>
        </el-table-column>
        <el-table-column prop="successRate" label="成功率" width="100">
          <template #default="{ row }">
            <el-tag :type="getSuccessRateType(row.successRate)">
              {{ row.successRate }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastUpdate" label="最后更新" />
      </el-table>
    </el-card>

    <!-- 导出报告 -->
    <div class="export-section">
      <el-button type="primary" @click="generateReport">
        📊 生成报告
      </el-button>
      <el-button @click="exportStats">
        📤 导出统计
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
const totalTasks = ref(25)
const successTasks = ref(22)
const failedTasks = ref(3)
const totalCrawled = ref(5432)
const weeklyIncrease = ref(3)
const todayIncrease = ref(234)

const successRate = computed(() => {
  return Math.round((successTasks.value / totalTasks.value) * 100)
})

const failureRate = computed(() => {
  return Math.round((failedTasks.value / totalTasks.value) * 100)
})

const detailStats = ref([
  {
    platform: '知乎',
    icon: '🗣️',
    totalTasks: 8,
    successTasks: 7,
    failedTasks: 1,
    totalData: 1234,
    avgSpeed: 15,
    successRate: 87.5,
    lastUpdate: '2025-08-03 15:42',
  },
  {
    platform: '小红书',
    icon: '🔴',
    totalTasks: 6,
    successTasks: 6,
    failedTasks: 0,
    totalData: 856,
    avgSpeed: 12,
    successRate: 100,
    lastUpdate: '2025-08-03 14:30',
  },
  {
    platform: '抖音',
    icon: '🎵',
    totalTasks: 5,
    successTasks: 4,
    failedTasks: 1,
    totalData: 678,
    avgSpeed: 18,
    successRate: 80,
    lastUpdate: '2025-08-03 13:15',
  },
  {
    platform: 'B站',
    icon: '📺',
    totalTasks: 4,
    successTasks: 3,
    failedTasks: 1,
    totalData: 432,
    avgSpeed: 10,
    successRate: 75,
    lastUpdate: '2025-08-03 12:45',
  },
  {
    platform: '微博',
    icon: '📱',
    totalTasks: 2,
    successTasks: 2,
    failedTasks: 0,
    totalData: 234,
    avgSpeed: 8,
    successRate: 100,
    lastUpdate: '2025-08-02 16:20',
  },
])

const getSuccessRateType = (rate: number) => {
  if (rate >= 90) return 'success'
  if (rate >= 70) return 'warning'
  return 'danger'
}

const generateReport = () => {
  ElMessage.success('正在生成统计报告...')
  // 这里可以生成详细的统计报告
}

const exportStats = () => {
  ElMessage.success('统计数据已导出')
  // 这里可以导出统计数据
}
</script>

<style scoped>
.stats-view {
  max-width: 1200px;
  margin: 0 auto;
}

.chart-card {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-placeholder {
  height: 300px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-content {
  text-align: center;
}

.chart-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.chart-title {
  font-size: 18px;
  color: #606266;
  margin-bottom: 20px;
}

.chart-data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  max-width: 600px;
}

.data-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
}

.data-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.trend-data {
  max-width: 400px;
  margin: 0 auto;
}

.trend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.trend-date {
  width: 60px;
  font-size: 12px;
  color: #909399;
}

.trend-bar {
  height: 20px;
  background: var(--el-color-primary-light-5);
  border-radius: 10px;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.trend-bar.active {
  background: var(--el-color-primary);
}

.trend-value {
  width: 40px;
  text-align: right;
  font-size: 12px;
  color: #606266;
  font-weight: 600;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  font-weight: 500;
}

.stat-icon {
  font-size: 20px;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.stat-change {
  font-size: 12px;
}

.stat-change.positive {
  color: #67c23a;
}

.stat-change.negative {
  color: #f56c6c;
}

.detail-stats {
  margin-bottom: 20px;
}

.export-section {
  text-align: center;
}

.export-section .el-button {
  margin: 0 10px;
  padding: 12px 24px;
}
</style>